<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>塔罗牌占卜 - 探索内心的智慧</title>
  <meta name="description" content="基于Vue3和Vite构建的塔罗牌占卜程序，实现完整的占卜流程和叙事重构">
  <meta name="keywords" content="塔罗牌,占卜,占卜程序,Vue3,Vite,共时性,叙事重构">
  
  <!-- 预加载字体 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- 图标 -->
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔮</text></svg>">
  
  <style>
    /* 全局样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      background: #f5f5f5;
    }
    
    /* 加载动画 */
    .loading-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity 0.5s ease;
    }
    
    .loading-container.hidden {
      opacity: 0;
      pointer-events: none;
    }
    
    .loading-spinner {
      width: 60px;
      height: 60px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-top: 4px solid white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 2rem;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .loading-text {
      color: white;
      font-size: 1.2rem;
      text-align: center;
    }
    
    .loading-text h2 {
      margin-bottom: 1rem;
      font-size: 2rem;
    }
    
    .loading-text p {
      opacity: 0.8;
    }
    
    /* 滚动条样式 */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #667eea;
      border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #5a6fd8;
    }
  </style>
</head>
<body>
  <!-- 加载动画 -->
  <div id="loading" class="loading-container">
    <div class="loading-spinner"></div>
    <div class="loading-text">
      <h2>🔮 塔罗牌占卜</h2>
      <p>正在准备神秘的占卜环境...</p>
      <p>请稍候，让心灵沉淀...</p>
    </div>
  </div>

  <!-- Vue应用挂载点 -->
  <div id="app"></div>

  <!-- 脚本 -->
  <script type="module">
    import { createApp } from 'vue'
    import App from './src/App.vue'
    
    // 创建Vue应用
    const app = createApp(App)
    
    // 挂载应用
    app.mount('#app')
    
    // 隐藏加载动画
    setTimeout(() => {
      const loading = document.getElementById('loading')
      if (loading) {
        loading.classList.add('hidden')
        setTimeout(() => {
          loading.remove()
        }, 500)
      }
    }, 2000)
  </script>
  
  <!-- 页面加载完成后的额外处理 -->
  <script>
    // 页面加载完成后的处理
    window.addEventListener('load', function() {
      // 设置页面标题动画
      const title = document.title
      let isOriginal = true
      
      setInterval(() => {
        if (isOriginal) {
          document.title = '🔮 塔罗牌占卜 - 正在等待你的问题...'
        } else {
          document.title = title
        }
        isOriginal = !isOriginal
      }, 3000)
      
      // 添加页面可见性变化处理
      document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
          document.title = '🔮 塔罗牌占卜 - 请回来继续你的占卜之旅...'
        } else {
          document.title = title
        }
      })
    })
    
    // 防止页面意外关闭
    window.addEventListener('beforeunload', function(e) {
      // 如果正在进行占卜，提示用户
      const app = document.getElementById('app')
      if (app && app.innerHTML.includes('step-panel')) {
        e.preventDefault()
        e.returnValue = '你正在进行的占卜可能会丢失，确定要离开吗？'
        return e.returnValue
      }
    })
  </script>
</body>
</html> 